<template>
  <!-- 外层容器，包含侧边栏和主内容区域，可根据需要调整布局样式 -->
  <div class="markdown-container">
    <!-- 侧边栏导航：用于显示所有 Markdown 文件的标题列表，可扩展为动态加载更多文档 -->
    <div class="sidebar">
      <!-- 遍历 markdownFiles 数组，渲染每个文档标题 -->
      <div 
        v-for="(file, index) in markdownFiles"
        :key="index"  
        class="nav-item"
        @click="scrollToFile(index)"
      >
        {{ file.title }} <!-- 显示文档标题 -->
      </div>
    </div>
    
    <!-- 主内容区，显示所有 Markdown 文件内容，可扩展为分页或懒加载 -->
    <div class="content">
      <!-- 遍历 markdownFiles，渲染每个文档内容区块 -->
      <div 
        v-for="(file, index) in markdownFiles"
        :key="index"
        :id="'file-'+index"  
        class="markdown-section"
      >
        <h2 class="section-title">{{ file.title }}</h2> <!-- 显示文档标题，可自定义样式 -->
        <div class="markdown-content" v-html="file.content"></div> <!-- 渲染 Markdown 内容，使用 v-html 直接插入 HTML，注意防止 XSS 攻击 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue' // 引入 Vue 3 的 ref 响应式和生命周期钩子
import { marked } from 'marked' // 引入 marked 库用于 Markdown 解析

// 修改为使用import导入Markdown文件
import aospMd from '/public/docs/安卓系统源码 AOSP.md?raw' // 导入安卓系统源码 AOSP 的 Markdown 原文
import fridaMd from '/public/docs/frida使用大全.md?raw' // 导入 frida 使用大全的 Markdown 原文

const markdownFiles = ref([
  {
    title: '安卓系统源码 AOSP', // 文档标题
    content: marked.parse(aospMd) // 解析后的 HTML 内容，实际渲染到页面
  },
  {
    title: 'frida使用大全', // 文档标题
    content: marked.parse(fridaMd) // 解析后的 HTML 内容
  }
])

// 滚动到指定文件
const scrollToFile = (index) => { // 根据索引滚动到对应的内容区块
  const el = document.getElementById(`file-${index}`) // 获取目标元素
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' }) // 平滑滚动到目标位置
  }
}
</script>

<style scoped>
.markdown-container {
  display: flex; /* 使用 flex 布局，侧边栏和内容区横向排列 */
  height: 100vh; /* 占满整个视口高度 */
}

.sidebar {
  width: 200px; /* 侧边栏宽度 */
  background: #f5f5f5; /* 背景色 */
  padding: 20px; /* 内边距 */
  overflow-y: auto; /* 超出部分滚动 */
}

.nav-item {
  padding: 10px; /* 导航项内边距 */
  cursor: pointer; /* 鼠标悬停为手型 */
  border-bottom: 1px solid #eee; /* 底部分割线 */
}

.nav-item:hover {
  background: #e0e0e0; /* 悬停高亮 */
}

.content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px; /* 内边距 */
  overflow-y: auto; /* 超出部分滚动 */
}

.markdown-section {
  margin-bottom: 40px; /* 区块间距 */
}

.section-title {
  padding-bottom: 10px; /* 标题下边距 */
  border-bottom: 2px solid #4285f4; /* 标题下划线 */
  margin-bottom: 20px; /* 标题与内容间距 */
}

.markdown-content {
  line-height: 1.6; /* 行高，提升可读性 */
  text-align: left; /* 左对齐 */
  direction: ltr; /* 从左到右 */
  max-width: 100%; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
  padding: 0 10px; /* 左右内边距 */
  word-wrap: break-word;  /* 新增：允许长单词换行 */
  overflow-wrap: break-word; /* 新增：更好的换行处理 */
  white-space: pre-wrap; /* 保留：保留空白符但允许换行 */
}

.markdown-section {
  margin-bottom: 40px; /* 区块间距 */
  text-align: left;  /* 新增：确保整个区块左对齐 */
}
</style>